<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>添加 - easyui</title>
		<%@ include file="/common/include/title.jsp"%>
		
		<script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/ueditor.config.js"></script>
	    <script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/ueditor.all.min.js"> </script>
	    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
	    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
	    <script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/lang/zh-cn/zh-cn.js"></script>
		
		<script type="text/javascript">
			$(function()
			{
				//实例化编辑器
			    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
			    /* editor:id为editor的元素 */
			    var ue = UE.getEditor('editor');
			})
		
			/* 提交数据 */ 
			function dataSubmit()
			{
				$("#form").form('submit',
				{
					onSubmit:function()
					{
						var flag = $(this).form('enableValidation').form('validate') ; 
						alert(flag);
						return flag;
					},
					success:function(data)
					{
						/* alert('--success---' + data); */
						/* 提示 
							easy-ui:alert
						*/
						/*
							将字符串变成JSON
						*/
						data = JSON.parse(data);
						$.messager.alert("成功!!",data.info);
						/* alert('--success---' + data.info); */
					}
				});
				return false ; 
			}
			//切换分类的事件
			function changeCate()
			{
				//取到下拉框选择的值(value)
				//获取到了下拉框中所有的option的集合,如何循环?--each(function ()循环
				var json = "" ;
				$("#cateId").children("option").each(function()
				{
					//$(this):取的是Jquery容器的每一个Jquery对象(取的就是每一个option Jquery对象)
					//取到选中的option:$(this).prop("selected")
					//alert($(this).prop("selected") + "-----" + $(this).attr("json"));
					//判断
					if($(this).prop("selected"))
					{
					    //取JSON对象：$(this).attr("json")取JSON对象：$(this).attr("json")
						json = $(this).attr("json");
						//alert(json + "------");
					}
				});					
				//eval:js的解析器,可以解析js的字符串
				eval("var jsonObj = " + json);
				
				//拼装HTML字符串---循环			
				var htmlsb = "";
				//循环主题
				for(var i=0; i<jsonObj.length; i++)
				{
					var json1 = jsonObj[i];
					//alert(json1.name);//主题，处理器，内存容量
					htmlsb += "<tr class='spec1'>" ;
					htmlsb += "		<td>"+ json1.name +"(*):</td>" ;
					htmlsb += "		<td></td>" ;
					htmlsb += "</tr>" ;
					//循环keys
					for(var j = 0; j< json1.keys.length; j++)
					{
						var jsonKeys = json1.keys[j];
						htmlsb += "<tr class='spec1'>";
						htmlsb += "		<td>"+ jsonKeys.name +":</td>" ;
						htmlsb += "		<td>";
						
						//放上keys对应的值
						htmlsb += "<select name='spec_"+ json1.name +"_"+ jsonKeys.name +"'>" ;
						for(var k = 0 ; k < jsonKeys.values.length ; k ++)
						{
							var jsonValues = jsonKeys.values[k];
							htmlsb += "<option>"+ jsonValues +"</option>";
						}
						htmlsb += "</select>" ;					
						htmlsb += "		</td>" ;
						htmlsb += "</tr>" ;
					}
				}
				/* 删除节点 */
				$(".spec1").remove();
				/* alert(htmlsb) */
				/* 将拼装的html放到页面合适的元素上面
					放到分类<tr>的后面*/
				$("#specDiv").after(htmlsb);
				return false ;
			}
		</script>
	</head>
	<body>
		<!-- 弹出的对话框 -->
		<div id="dataDialog" class="easyui-panel" title="商品添加" data-options="iconCls:'icon-save'">
			<form id="form" action="${rootPath }/back/goods/goodsInsertSubmit.htm" method="post" enctype="multipart/form-data">
				<table>
					<tr>
						<td id="specDiv">
							分类:
						</td>
						<td>
							<select id="cateId" name="cateId" onchange="return changeCate()">
								<c:forEach items="${requestScope.goodsCateTreeList }" var="cate">
									<!-- 将JSON中的双引号变成单引号 -->
									<option json="${fn:replace(cate.spec,'"','\'')}" value="${cate.id}" ${cate.leafStatus == '0' ? 'disabled' : ''}>${cate.treeName }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							品牌:********
						</td>
						<td>
							<select name="brandId">
								<c:forEach items="${requestScope.brandList }" var="brand">
									<option value="${brand.id}">${brand.name }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							名称(前台用户):
						</td>
						<td>
							<input type="text" name="name" class="easyui-validatebox" 
							placeholder="名称(前台用户)" data-options="required:true"/>
						</td>
					</tr>
					<tr>
						<td>标题(管理员):</td>
						<td>
							<input type="text" name="title" class="easyui-textbox" placeholder="标题(管理员)"/>
						</td>
					</tr>
					<tr>
						<td>URL:</td>
						<td>
							<input type="text" name="url" class="easyui-textbox" placeholder="URL"/>
						</td>
					</tr>
					<tr>
						<td>重量:</td>
						<td>
							<input type="text" name="weight" class="easyui-textbox" placeholder="URL"/>
						</td>
					</tr>
					<tr>
						<td>库存:</td>
						<td>
							<input type="text" name="remainNum" class="easyui-textbox" placeholder="库存"/>
						</td>
					</tr>
					<tr>
						<td>市场价:</td>
						<td>
							<input type="text" name="marketPrice" class="easyui-textbox" placeholder="市场价"/>
						</td>
					</tr>
					<tr>
						<td>销售价格:</td>
						<td>
							<input type="text" name="price" class="easyui-textbox" placeholder="销售价格"/>
						</td>
					</tr>
					<tr>
						<td>列表图片:</td>
						<td>
							<input type="file" name="file" class="easyui-textbox" placeholder="列表图片"/>
						</td>
					</tr>
					<tr>
						<td>发布时间:</td>
						<td>
							<input type="text" name="pubtimeStr"
							value="<fmt:formatDate value="${sys_now}" pattern="yyyy-MM-dd HH:mm:ss"/>" 
							class="easyui-datetimebox" placeholder="发布时间"/>
						</td>
					</tr>
					<tr>
						<td>状态:</td>
						<td>
							<input type="radio" name="status" value="1" id="status1" checked="checked"/>
							<label for="status1">启用</label>
							<input type="radio" name="status" value="0" id="status0"/>
							<label for="status0">禁用</label>
						</td>
					</tr>
					<tr>
						<td>内容:</td>
						<td>
							<!-- <textarea rows="5" cols="50" name="content"></textarea> -->
							<script id="editor" name="content" type="text/plain" style="width:800px;height:400px;"></script>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="#" class="easyui-linkbutton" onclick="return dataSubmit()">提交</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>